<template>
  <div class="app-container">
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" size="mini" @click="createDeploy"
          >创建安装目录</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
          icon="el-icon-refresh"
          size="mini"
          @click="showInfoList"
        ></el-button>
      </el-col>
    </el-row>

    <el-table v-loading="loading" :data="infos">
      <el-table-column label="安装包名称" prop="deployName" align="center" />
      <el-table-column label="菜单路径" prop="path" align="center" />
      <el-table-column label="当前生效版本" prop="version" align="center" />
      <el-table-column label="当前版本时间" prop="versionDate" align="center" />
      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
        width="200"
      >
        <template slot-scope="scope">
          <el-button size="mini" type="text" @click="confHandler(scope.row)"
            >配置</el-button
          >
          <el-button size="mini" type="text" @click="bindMenuHandler(scope.row)"
            >绑定菜单</el-button
          >
          <el-button
            size="mini"
            type="text"
            @click="versionBackHandler(scope.row)"
            >版本回退</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 创建安装目录对话框 -->
    <el-dialog
      title="创建安装目录"
      :visible.sync="open"
      width="600px"
      append-to-body
    >
      <el-form ref="form" :model="form" label-width="120px" :rules="rules">
        <el-row>
          <el-col :span="15">
            <el-form-item label="安装包名称" prop="deployName">
              <el-input
                v-model="form.deployName"
                placeholder="请输入目录名称"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 绑定菜单对话框 -->
    <el-dialog
      title="绑定菜单"
      :visible.sync="menuOpen"
      width="600px"
      append-to-body
    >
      <el-form
        ref="menuForm"
        :model="form"
        label-width="120px"
        :rules="menuRules"
      >
        <el-row>
          <el-col :span="24">
            <el-form-item label="菜单" prop="menuId">
              <treeselect
                ref="menu"
                v-model="form.menuId"
                :options="menuOptions"
                :normalizer="normalizer"
                :show-count="true"
                placeholder="选择菜单"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitMenuForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 版本回退对话框 -->
    <el-dialog
      title="版本回退"
      :visible.sync="versionOpen"
      width="600px"
      append-to-body
    >
      <el-form ref="versionForm" :model="form" label-width="120px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="版本">
              <el-select
                v-model="form.version"
                placeholder="请选择版本"
                style="width: 100%"
              >
                <el-option
                  v-for="version in versionList"
                  :key="version"
                  :label="version"
                  :value="version"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitVersionForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {
  getDeployInfo,
  createDeployDir,
  getMenuTree,
  getDeployVersionList,
  changeDeployProp,
} from "@/api/console";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
export default {
  name: "alarm",
  components: { Treeselect },
  data() {
    return {
      loading: false,
      infos: [],
      open: false,
      form: {},
      rules: {
        deployName: [
          { required: true, message: "安装包名称不能为空", trigger: "blur" },
        ],
      },
      menuOpen: false,
      menuRules: {
        menuId: [{ required: true, message: "菜单不能为空", trigger: "blur" }],
      },
      // 菜单树选项
      menuOptions: [],
      versionOpen: false,
      versionList: [],
    };
  },
  created() {
    this.showInfoList();
  },
  methods: {
    showInfoList() {
      this.loading = true;
      getDeployInfo()
        .then((res) => {
          this.infos = res.data;
          this.loading = false;
        })
        .catch((msg) => {
          this.loading = false;
        });
    },
    confHandler(row) {
      this.$store.commit("conf/SET_DEPLOY_NAME", row.deployName);
      this.$router.push("/service/conf");
    },
    createDeploy() {
      this.form = {};
      this.open = true;
    },
    bindMenuHandler(row) {
      this.form.deployName = row.deployName;
      this.getTreeselect();
      this.menuOpen = true;
    },
    versionBackHandler(row) {
      this.versionOpen = true;
      this.form={};
      //this.form.version = row.version;
      this.form.deployName = row.deployName;
      getDeployVersionList(row.deployName).then((res) => {
        this.versionList = res.data;
      });
    },
    cancel() {
      this.form.menuId = undefined;
      this.open = false;
      this.menuOpen = false;
      this.versionOpen = false;
    },
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          createDeployDir(this.form.deployName).then((res) => {
            this.msgSuccess("操作成功");
            this.showInfoList();
          });
          this.open = false;
        }
      });
    },
    /** 转换菜单数据结构 */
    normalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children;
      }
    },
    /** 查询菜单下拉树结构 */
    getTreeselect() {
      getMenuTree().then((response) => {
        this.menuOptions = this.handleTree(response.data, "menuId");
      });
    },
    findMenuPath(menuId, menus) {
      for (let i = 0; i < menus.length; i++) {
        if (menus[i].id == menuId) {
          return menus[i].path;
        }
        if (menus[i].children) {
          return this.findMenuPath(menuId, menus[i].children);
        }
      }
    },
    submitMenuForm() {
      this.$refs["menuForm"].validate((valid) => {
        if (valid) {
          let path = this.findMenuPath(this.form.menuId, this.menuOptions);
          changeDeployProp(this.form.deployName, "path", path).then((res) => {
            this.msgSuccess("操作成功");
            this.showInfoList();
          });
          this.menuOpen = false;
          this.form.menuId = undefined;
        }
      });
    },
    submitVersionForm() {
      if (this.form.version == 0) {
        this.form.version = "0";
      }
      if (!this.form.deployName || !this.form.version) {
        console.log(this.form);
        this.msgError("请选择版本");
        return;
      }
      changeDeployProp(this.form.deployName, "version", this.form.version).then(
        (res) => {
          this.msgSuccess("操作成功");
          this.showInfoList();
        }
      );
      this.versionOpen = false;
    },
  },
};
</script>